<template>
    <div class="gedan">
        <!-- top -->
        <div class="gedantop">
            <div class="title">发现好歌单</div>
            <div class="more">查看更多</div>
        </div>
        <div class="gedancontent">
            <van-swipe :loop="false" :width="100" class="myswipe" :show-indicators="false">
                <!-- 轮播效果 -->
                <van-swipe-item v-for="item in state.gedanlist" :key="item.id">
                    <router-link :to="{ path  ,query:{id:item.id}}">
                    <!-- 展示图片 -->
                    <img :src="item.picUrl" alt="">
                    <span class="playCount">
                        <!-- icon -->
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-bofang"  style="color: red"></use>
                        </svg>
                        <!-- 播放量 -->
                        <span>{{changeCount(item.playCount)}}</span>
                    </span>
                    <!-- 文字提示 -->
                    <span class="name">{{item.name}}</span>
                    </router-link>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>



    <div>21111111</div>
</template>

<script>
// 歌单接口
import { gedan } from '@/api/index';
import { onMounted ,reactive } from 'vue';
export default {
    name: 'Gedan',
    setup() {
        // 定义一个空数组存放后端接口的数据
        const state = reactive({
            gedanlist:[],
        });
        const path = '/songdetails'
        
         // 数字转换、定义函数
        function changeCount(num) { 
                    if (num>=100000000) {
                        // 保留小数点后面0位
                        return (num/100000000).toFixed(2) + '亿'
                    }else if (num>=10000 && num<100000000) {
                        return (num/10000).toFixed(2) + '万'
                    }
        }

        // 获取数据
        onMounted(()=>{
            let gedans = async ()=>{
                let res = await gedan()
                // console.log(res.data.result);
                state.gedanlist=res.data.result
                // console.log(state.gedanlist);
            }
            gedans()
        })
        // 要记得抛出
        return { state ,changeCount ,path}
    },
};

</script>

<style lang="scss" scoped>
    .gedan{
        width: 100%;
        height: 5rem;
        padding: 0.4rem;
        .gedantop{
            width: 100%;
            height: 0.6rem;
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.2rem;
            .title{
                font-size: 0.4rem;
                font-weight: 900;
            }
            .more{
                border: 0.02rem solid #ccc;
                text-align: center;
                line-height: 0.6rem;
                padding: 0  0.2rem;
                border-radius: 0.4rem;
            }
        }
        .gedancontent{
            width: 100%;
            height: 3.5rem;
            .myswipe{
                height: 100%;
                .van-swipe-item{
                    margin-right: .3rem;
                    position: relative;
                }
                .playCount{
                  display: inline-block;
                  position: absolute;
                  color: #fff;
                  width: 100%;
                  text-align: right;
                  font-size: .1rem;
                  margin-top: 1.6rem;
                }
                .icon{
                    width: 0.3rem;
                    vertical-align: bottom;
                    height: .32rem;
                }
                img{
                    width: 100%;
                    height: 2rem;
                    border-radius: .2rem;
                    z-index: -9999;
                    position: absolute
                }
                .name{
                    display: inline-block;
                    width: 100%;
                    height: 1rem;
                    /*第一步： 溢出隐藏 */
                    overflow: hidden;
                    /* 第二步：让文本不会换行， 在同一行继续 */
                    white-space: nowrap;
                    /* 第三步：用省略号来代表未显示完的文本 */
                    text-overflow: ellipsis;
                    top: 2rem;
                    position: relative;
                    font-size: .24rem;
                    line-height: 1rem;
                }
            }
        }
    }
</style>